import DetailHeader from "./header"
import DetailSider from "./sider"
import DetailContent from "./content";
import React, { useEffect, useState } from 'react';
import { Layout, Tooltip } from 'antd';
import { RollbackOutlined } from '@ant-design/icons';
import { useParams } from 'react-router-dom';
import { getProductByID } from "@/api/service/manageService"
const { Header, Sider, Content } = Layout;

const headerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: '#fff',
    height: 160,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#fff',
};

const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#fff',
};

const siderStyle: React.CSSProperties = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#fff',
    overflow: 'auto'
};

const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
    maxWidth: '100%',
    height: "100%",
};

export default function ProductDetail() {
    const { id } = useParams();
    const [detail, setDetail] = useState({});
    useEffect(() => {
        getProductByID(id).then(val => {
            console.log(val);
            setDetail(val);
        }).catch(err => {
            console.log(err);

        })
    }, [])

    return (
        <div style={{ position: "relative" }}>
            {/* 回退按钮： */}
            <Tooltip placement="left" title="返回" arrow={true}>
                <div onClick={() => window.history.back()} style={{ position: 'absolute', right: 20, top: 20, fontSize: 30, background: "#ee4", cursor: 'pointer', width: 40, borderRadius: 10 }}><RollbackOutlined /></div>
            </Tooltip>
            <Layout style={layoutStyle}>
                <Header style={headerStyle}>
                    <DetailHeader detail={detail}/>
                </Header>
                <Layout>
                    <Content style={contentStyle}>
                        <DetailContent detail={detail}/>
                    </Content>
                    <Sider width="45%" style={siderStyle}>
                        <DetailSider detail={detail}/>
                    </Sider>
                </Layout>
            </Layout>
        </div>
    )
}